<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>

    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        9个比较常用的按键修饰符：
            .enter
            .tab （必须配合keydown事件使用。）
            .delete (捕获“删除”和“退格”键)
            .esc
            .space
            .up
            .down
            .left
            .right
        怎么获取某个键的按键修饰符？
            第一步：通过event.key获取这个键的真实名字。
            第二步：将这个真实名字以kebab-case风格进行命名。
                PageDown是真实名字。经过命名之后：page-down
            或者event.keyCode获取键值，然后通过@keyup.键值获取
        Vue中按键修饰符是可以自定义的：
            通过Vue的全局配置对象config来进行按键修饰符的自定义
            语法规则：
                Vue.config.keyCodes.自定义按键修饰符名 = 键值
        系统修饰键：4个比较特殊的键
            ctrl、alt、shift、meta（在Windows上是win键，在Mac上是command键）
            对于keydown事件来说：只要按下ctrl键，keydown事件就会触发
            对于keyup事件来说：需要按下ctrl键，并且加上按下组合键之后，松开组合键，keyup事件才会触发
     -->
    <div id="app">
        <h1>{{msg}}</h1>
        回车键：<input type="text" @keyup.enter="getInfo"><br>
        回车键（键值）：<input type="text" @keyup.13="getInfo"><br>
        delete键：<input type="text" @keyup.delete="getInfo"><br>
        esc键：<input type="text" @keyup.esc="getInfo"><br>
        space键：<input type="text" @keyup.space="getInfo"><br>
        up键：<input type="text" @keyup.up="getInfo"><br>
        down键：<input type="text" @keyup.down="getInfo"><br>
        left键：<input type="text" @keyup.left="getInfo"><br>
        right键：<input type="text" @keyup.right="getInfo"><br>
        <!-- 这是误会：tab键无法触发keyup事件。只能触发keydown事件。 -->
        <!-- tab键在按下后切换到@keyup.tab元素的时候，触发keyup事件。 -->
        <!-- tab键在按下后从@keydown.tab元素切换其他位置的时候，触发keydown事件。 -->
        tab键： <input type="text" @keyup.tab="getInfo"><br>
        tab键（keydown）： <input type="text" @keydown.tab="getInfo"><br>
        <!-- @keyup.pageDown和.PageDown是无效的 -->
        <!-- PageDown键： <input type="text" @keyup.pageDown="getInfo"><br> -->
        PageDown键： <input type="text" @keyup.page-down="getInfo"><br>
        huiche键： <input type="text" @keyup.huiche="getInfo"><br>
        ctrl键(keydown)： <input type="text" @keydown.ctrl="getInfo"><br>
        <!-- ctrl的keyup事件：需要按下ctrl键，并且加上按下组合键之后，松开组合键，keyup事件才会触发 -->
        ctrl键(keyup)： <input type="text" @keyup.ctrl="getInfo"><br>
        <!-- 指定组合键 -->
        ctrl键(keyup)： <input type="text" @keyup.ctrl.i="getInfo"><br>
        alt键(keydown)： <input type="text" @keydown.alt="getInfo"><br>
        <!-- alt的keyup事件和ctrl一致 -->
        alt键(keyup)： <input type="text" @keyup.alt="getInfo"><br>
        shift键(keydown)： <input type="text" @keydown.shift="getInfo"><br>
        <!-- shift的keyup事件和ctrl一致 -->
        shift键(keyup)： <input type="text" @keyup.shift="getInfo"><br>
        meta键(keydown)： <input type="text" @keydown.meta="getInfo"><br>
        <!-- meta的keyup事件和ctrl一致，但是只有在没有系统快捷键的时候才有效，如o或小键盘等，一些不属于系统快捷键的快捷键能生效，如=或+打开放大镜等 -->
        meta键(keyup)： <input type="text" @keyup.meta="getInfo"><br>
    </div>

    <script>
        // 自定义按键修饰符
        Vue.config.keyCodes.huiche = 13;

        const vm = new Vue({
            el: '#app',
            data: {
                msg: '按键修饰符',
            },
            methods: {
                getInfo(event) {
                    console.log(event.target.value);
                    console.log(event.key);
                    console.log(event.keyCode);
                }
            }
        });
    </script>
</body>

</html>